<template>
  <div class="my-page">
    <!-- 头像显示以及个人名字 -->
    <view class="view-top">
      <view class="view-top-title">
        <!-- 头像 -->
        <view class="topinfo-avatarWrap">
          <image class="topinfo-titleImage" :src="info.title" @tap="goMyInfoPage"></image>
        </view>
        <!-- 昵称和备注 -->
        <view class="view-top-realName">
          <view class="topinfo-wxName">
            昵称：<span>{{ info.realName }}</span>
            <image class="topinfo-gender" :src="info.sexUrl"></image>
          </view>
          <view class="topinfo-otherInfo">
            <div>
              备注：<text>{{ info.integral }}  |  入行{{info.lengthOfService || 0}}年</text>
            </div>
            <van-icon name="qr" size="20" @tap="goQrCodePage"/>
          </view>
        </view>
      </view>
    </view>
<!--    显示一些统计信息-->
    <view class="counter-container">
      <view class="counter-item">
        <view class="counter-itemTitle">参与项目数</view>
        <view class="counter-itemNumber">{{userInfo.project1}}</view>
      </view>

      <view class="counter-item">
        <view class="counter-itemTitle">工作年龄</view>
        <view class="counter-itemNumber">{{userInfo.project2}}</view>
      </view>

      <view class="counter-item">
        <view class="counter-itemTitle">设备数</view>
        <view class="counter-itemNumber">{{userInfo.project3}}</view>
      </view>

      <view class="counter-item">
        <view class="counter-itemTitle">年龄</view>
        <view class="counter-itemNumber">{{userInfo.project4}}</view>
      </view>
    </view>
    <!-- 个人数据操作 -->
    <view class="menu">
<!--      获取权限-->
      <view class="menu-item" @tap="goIndexPage">
        <view class="menu-item-left">
          <van-icon name="setting-o" size="16" />
          <span style="line-height: 40rpx">获取权限</span>
        </view>
        <view class="menu-item-detail">
          <van-icon name="arrow" size="16" />
<!--          <image src="/static/imgs/gd.png" style="height: 26rpx; width: 16rpx;"></image>-->
        </view>
      </view>

      <view class="menu-cut-line">
        <view class="menu-cut-line-item"></view>
      </view>
      <!--      写点什么-->
      <view class="menu-item" @tap="goOtherPayPage">
        <view class="menu-item-left">
          <van-icon name="other-pay" size="16" />
          <span style="line-height: 40rpx">写点什么</span>
        </view>
        <view class="menu-item-detail">
          <van-icon name="arrow" size="16" />
        </view>
      </view>

      <view class="menu-cut-line">
        <view class="menu-cut-line-item"></view>
      </view>
      <!--      cell我-->
      <view class="menu-item" @tap="getPhoneCall">
        <view class="menu-item-left">
          <van-icon name="phone-o" size="16" />
          <span style="line-height: 40rpx">cell我</span>
        </view>
        <view class="menu-item-detail">
          <van-icon name="arrow" size="16" />
        </view>
      </view>

      <view class="menu-cut-line">
        <view class="menu-cut-line-item"></view>
      </view>
      <!--      扫一扫-->
      <view class="menu-item" @tap="getScanCode">
        <view class="menu-item-left">
          <van-icon name="scan" size="16" />
          <span style="line-height: 40rpx">扫一扫</span>
        </view>
        <view class="menu-item-detail">
          <van-icon name="arrow" size="16" />
        </view>
      </view>

      <view class="menu-cut-line">
        <view class="menu-cut-line-item"></view>
      </view>
      <!--      想写个计算器-->
      <view class="menu-item" @tap="goCalculatorPage">
        <view class="menu-item-left">
          <van-icon name="balance-list-o" size="16" />
          <span style="line-height: 40rpx">想写个计算器</span>
        </view>
        <view class="menu-item-detail">
          <van-icon name="arrow" size="16" />
        </view>
      </view>

      <view v-if="showStatus" class="menu-cut-line">
        <view class="menu-cut-line-item"></view>
      </view>
      <!--      来个退出-->
      <view v-if="showStatus" class="menu-item" @tap="cancelLogin">
        <view class="menu-item-left">
          <van-icon name="close" size="16"></van-icon>
          <span style="line-height: 40rpx">退出</span>
        </view>
        <view class="menu-item-detail">
          <van-icon name="arrow" size="16" />
        </view>
      </view>

    </view>

    <van-dialog id="van-dialog" />
    <van-toast id="van-toast" />



  </div>
</template>
<!--函数调用方式使用注意事项-->
<!--有如下几点：-->

<!--1，必须放置一个dialog的声明方式定义：-->
<!--<van-dialog id="van-dialog" />-->

<!--2，使用import命令中不能使用绝对路径方式：-->

<!--import Dialog from '@/../static/vant/dialog/dialog'-->

<!--这里的@代表项目中的src目录。-->

<!--然后就可以使用更灵活的函数调用方式了：-->
<!--Dialog.alert({-->
<!--title: '标题',-->
<!--message-->
<!--})-->

<script>
  import vprompt from '../../components/dialogPrompt'
  import test from '../../components/test'
  import {showToast} from "../../utils/wxUtil";
  import Dialog from '@/../static/vant/dialog/dialog'

  export default {
    name: 'myPage',
    components: {
      vprompt,
      test
    },
    data() {
      return {
        toastShow: false,
        info: {
          title: require('../../../static/imgs/title.jpg'),
          sexUrl: 0 ? require('../../../static/imgs/male.png') : require('../../../static/imgs/female.png'),
          realName: 'mpVue',
          integral: 'mpVue-practice',
          lengthOfService: 2
        },
        userInfo: {
          project1: 6,
          project2: 2,
          project3: 1,
          project4: 22,
        },
        showStatus: true,
      }
    },
    onShow() {
      // 页面显示的时候，或者切换回来的时候
      this.internalCache()
    },
    methods: {
      /**
       * @author: @xusy
       * @date: 2020/12/8 10:03
       * @creed: 获取简单的登录的权限的信息
       * @remark：登录之后，提示不用再次登录
       */
      goIndexPage() {
        if (wx.getStorageSync("user_info")) {
          this.$wxUtil.showToast('登录过了，别再登了！')
          return
        }
        this.$router.push({
          path: "/pages/myPage/child/myOrization"
        });
      },
      /**
       * @author: @xusy
       * @date: 2020/12/8 9:23
       * @creed: 点击弹窗信息
       */
      dialog() {
        this.$wxUtil.showToast('点啥呢')
      },
      /**
       * @author: @xusy
       * @date: 2020/12/8 9:38
       * @creed: 获取内部缓存，看wx.getStorageSync("user_info")是否有信息
       */
      internalCache() {
        if (wx.getStorageSync("user_info")) {
          let tempInfo = wx.getStorageSync("user_info")
          this.info.title = tempInfo.avatarUrl
          this.info.realName = tempInfo.nickName
          this.info.sexUrl = tempInfo.gender ? require('../../../static/imgs/male.png') : require('../../../static/imgs/female.png')

          this.showStatus = true
           return
        }
        this.showStatus = false
      },
      /**
       * @author: @xusy
       * @date: 2020/12/10 14:26
       * @creed: 常用数据页面
       */
      goOtherPayPage() {
        this.$router.push({
          path: "/pages/myPage/child/otherPay"
        });
      },
      /**
       * @author: @xusy
       * @date: 2020/12/11 9:37
       * @creed: 拨打电话
       */
      getPhoneCall() {
        wx.makePhoneCall({
          phoneNumber: '13214004656',
          success: function () {
            console.log("成功拨打电话")
          },
        })
      },
      /**
       * @author: @xusy
       * @date: 2020/12/11 10:10
       * @creed: 微信扫一扫
       */
      getScanCode() {
        wx.scanCode({
          onlyFromCamera:false,   //值为 false  既可以使用相机也可以使用相册，  值为true 只能使用相机
          scanType:['barCode', 'qrCode','datamatrix','pdf417'], //分别对应 一维码  二维码  DataMatrix码  PDF417条码
          success: async (res) => { //扫码成功后
            //res.result		所扫码的内容
            //res.scanType		所扫码的类型
            //res.charSet		所扫码的字符集
            //res.path			当所扫的码为当前小程序二维码时，会返回此字段，内容为二维码携带的 path
            //res.rawData		原始数据，base64编码
            this.$toast('扫码成功')
            console.log('----->>>', res.result)
          },
          fail: (res) => {//扫码失败后
            this.$toast('扫码失败')
          },
        })
      },
      /**
       * @author: @xusy
       * @date: 2020/12/9 11:22
       * @creed: 跳转计算器页面
       */
      goCalculatorPage() {
        // this.$router.push({
        //   path: "/pages/myPage/child/counter"
        // });
        wx.navigate({
          target: 'miniProgram',
          path: '/pages/myPage/child/counter'
        })
      },
      /**
       * @author: @xusy
       * @date: 2020/12/11 10:24
       * @creed: 个人信息
       */
      goMyInfoPage() {
        this.$router.push({
          path: "/pages/myPage/child/myInfo"
        });
      },
      goQrCodePage() {
        this.$router.push({
          path: "/pages/myPage/child/qrCode"
        });
      },
      /**
       * @author: @xusy
       * @date: 2020/12/8 10:05
       * @creed: 退出登录的操作
       */
      cancelLogin() {
        this.$dialog.confirm({
          title: '退出',
          message: '您确定要退出吗？'
        }) .then(() => {
          if (wx.getStorageSync("user_info")) {
            wx.removeStorageSync('user_info')
            this.$toast('好了清除干净了！');
            console.log(wx.getStorageSync("user_info"));
            return
          }
        }).catch(() => {
          this.$toast('点击取消了')
        });
      },
    },

  }
</script>

<style scoped>
  .my-page {
    width: 100%;
    min-height: 100%;
  }
  /* 最上方个人信息的缩略版样式 */
  .view-top {
    width: 100%;
    height: 200rpx;
    background: #FFFFFF;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eeeeee;
  }
  .view-top-title{
    display: flex;
  }
  .topinfo-avatarWrap{
    margin-left: 60rpx;
  }
  .topinfo-titleImage{
    width: 120rpx;
    height: 120rpx;
    border-radius: 10rpx;
  }
  .topinfo-gender{
    width: 30rpx;
    height: 30rpx;
    margin-left: 10rpx;
  }
  .topinfo-otherInfo{
    margin-top: 20rpx;
    font-size: 24rpx;
    color: #999;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .topinfo-wxName{
    font-size: 28rpx;
    color: #666;
  }
  .view-top-realName{
    margin-left: 40rpx;
    padding: 10rpx 0;
    width: 480rpx;
  }
  /* 跳转页面的个人数据的详细的页面的样式 */
   .view-top-detail{
     width: 100rpx;
   }
  .view-top-detail image{
    height: 36rpx;
    width: 32rpx;
  }
  /* 统计的信息的显示 */
  .counter-container{
    background: #fff;
    width: 100%;
    padding: 25rpx 0;
    display: flex;
    justify-content: space-around;
    flex-direction: row;
  }
  .counter-item{
    flex-shrink: 1;
  }
  .counter-itemTitle{
    font-size: 22rpx;
    color: #999;
    text-align: center;
  }
  .counter-itemNumber{
    font-size: 36rpx;
    color: #FF7A22;
    font-weight: bold;
    text-align: center;
    line-height: 66rpx;
  }

  /*menu菜单的设置*/
   .menu{
     margin-top: 20rpx;
     background: #FFFFFF;
   }
  /*详细的左边的样式*/
  .menu-item {
    height: 90rpx;
    margin: 0 20 rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .menu-item-left {
    display: flex;
    align-items: center;
  }
  .menu-item-left van-icon{
    margin: 0 20rpx;
  }
  /*详细的图标位置*/
  .menu-item-detail{
    width: 50rpx;
  }
  /*分割线-父级右对齐*/
  .menu-cut-line{
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }
  /*分割线的样式*/
  .menu-cut-line-item{
    width: 650rpx;
    height: 1rpx;
    background: #F1F0F0;
  }

</style>
